<template>
  <el-drawer
    :visible="deductionView"
    show-close
    :before-close="handleClose"
    class="drawer-style"
    size="75%"
  >
    <div class="deductionView-div">
      <span class="deductionView-span">会员资料</span>
    </div>
    <el-row style="margin: 30px">
      <el-col :span="8"
        ><span>姓名：</span><span>{{ viewInfo.name }}</span></el-col
      >
      <el-col :span="8"
        ><span>昵称：</span><span>{{ viewInfo.blogNickName }}</span></el-col
      >
      <el-col :span="8"
        ><span>车辆品牌：</span><span>{{ viewInfo.truckBrand }}</span></el-col
      >
    </el-row>
    <el-row style="margin: 30px">
      <el-col :span="8"
        ><span>性别：</span
        ><span>
          {{ viewInfo.sexFlag === "W" ? "女" : "" }}
          {{ viewInfo.sexFlag === "2" ? "女" : "" }}
          {{ viewInfo.sexFlag === "M" ? "男" : "" }}
          {{ viewInfo.sexFlag === "1" ? "男" : "" }}
        </span></el-col
      >
      <el-col :span="8"
        ><span>生日：</span><span>{{ viewInfo.birthday }}</span></el-col
      >
      <el-col :span="8"
        ><span>首次消费油站：</span
        ><span>{{ viewInfo.firstStationName }}</span></el-col
      >
    </el-row>
    <el-row style="margin: 30px 30px 50px 30px">
      <el-col :span="8"
        ><span>手机号：</span><span>{{ viewInfo.mobilePhone }}</span></el-col
      >
      <el-col :span="8"
        ><span>车牌号：</span><span>{{ viewInfo.truckNumber }}</span></el-col
      >
      <el-col :span="8"
        ><span>会员等级：</span
        ><span>
          {{ viewInfo.memberLevel === "1" ? "普卡" : "" }}
          {{ viewInfo.memberLevel === "2" ? "银卡" : "" }}
          {{ viewInfo.memberLevel === "3" ? "金卡" : "" }}
          {{ viewInfo.memberLevel === "4" ? "钻卡" : "" }}
          {{ viewInfo.memberLevel === "5" ? "黑卡" : "" }}
        </span></el-col
      >
    </el-row>

    <div class="deductionView-div">
      <span class="deductionView-span">会员信息</span>
    </div>
    <el-row style="margin: 30px">
      <el-col :span="8"
        ><span>会员id：</span><span>{{ viewInfo.cardCode }}</span></el-col
      >
      <el-col :span="8"
        ><span>所属油企：</span
        ><span>{{ viewInfo.enterpriseName }}</span></el-col
      >
      <el-col :span="8"
        ><span>IC卡号：</span><span>{{ viewInfo.ICCard }}</span></el-col
      >
    </el-row>
    <el-row style="margin: 30px">
      <el-col :span="8"
        ><span>会员编码：</span><span>{{ viewInfo.memberCode }}</span></el-col
      >
      <el-col :span="8"
        ><span>来源：</span
        ><span
          >{{ viewInfo.userSource == "4" ? "后台导入" : ""
          }}{{ viewInfo.userSource == "5" ? "自主注册" : ""
          }}{{ viewInfo.userSource == "yunhua" ? "第三方平台同步" : "" }}</span
        ></el-col
      >
      <el-col :span="8"
        ><span>注册时间：</span><span>{{ viewInfo.registeDate }}</span></el-col
      >
    </el-row>
    <el-row style="margin: 30px 30px 50px 30px">
      <el-col :span="8"
        ><span>会员推送id：</span><span>{{ viewInfo.blogOpenid }}</span></el-col
      >
      <el-col :span="8"
        ><span>常用油品：</span><span>{{ viewInfo.usualOilName }}</span></el-col
      >
      <el-col :span="8"
        ><span>更新时间：</span><span>{{ viewInfo.updateDate }}</span></el-col
      >
    </el-row>
    <div class="deductionView-div">
      <span class="deductionView-span">账户信息</span>
    </div>
    <el-row style="margin: 30px 30px 50px 30px">
      <el-col :span="8">
        <span>电子卡总余额（元）：</span><span>{{ viewInfo.balance }}</span>
      </el-col>
      <el-col :span="8">
        <span>实体储值卡总余额（元）：</span>
        <span>{{ viewInfo.totalBalanceAmount || 0 }}</span>
      </el-col>
      <el-col :span="8">
        <span>积分余额：</span><span>{{ viewInfo.integral }}</span>
      </el-col>
    </el-row>
    <el-row style="margin: 30px 30px 50px 30px">
      <el-col :span="8">
        <span>成长值：</span><span>{{ viewInfo.growUpValue || 0 }}</span>
      </el-col>
    </el-row>
    <el-row style="margin: 30px 30px 50px 30px">
      <el-col :span="24">
        <el-button size="small" class="deductionView-button" @click="shutDown"
          >关闭</el-button
        >
      </el-col>
    </el-row>
  </el-drawer>
</template>
<script>
export default {
  name: "CouponView",
  props: {
    deductionView: {
      type: Boolean,
      default: false,
    },
    couponsInfo: {
      default: () => [],
    },
  },
  data() {
    return {
      viewInfo: {},
    };
  },
  created() {},
  methods: {
    // 点击关闭
    shutDown() {
      this.$emit("update:deductionView", false);
    },
    handleClose(done) {
      this.$emit("update:deductionView", false);
      console.log("关闭了");
      done();
    },
  },
  watch: {
    deductionView: {
      deep: true, // 深度监听
      handler(newVal, oldVal) {
        if (newVal) {
          this.viewInfo = this.couponsInfo;
          console.log("打开了查看", this.couponsInfo);
        }
      },
    },
  },
};
</script>
<style scoped lang="scss">
.deductionView-button {
  width: 100px;
  position: absolute;
  right: 30px;
}
.deductionView-div {
  height: 40px;
  position: relative;
}
.deductionView-span {
  position: absolute;
  left: 6%;
  line-height: 40px;
}
.deductionView-div::after {
  position: absolute;
  left: 0;
  top: 50%;
  content: "";
  display: block;
  width: 5%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.4);
}
.deductionView-div::before {
  position: absolute;
  right: 0;
  top: 50%;
  content: "";
  display: block;
  width: 87%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.4);
}
</style>
